<template>
<!-- 我的请假 -->
  <div class="my-leave">
    <!-- 顶部标题栏组件 -->
    <top-header :leftArrow="leftArrow"></top-header>

    <!-- 我的请假内容 -->
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了"  @load="onLoad">
      <van-cell v-for="(item,index) in list" :key="index"  @click="toDetail(item)">
        <template #title>
          <div class="van-title">
            <div class="van-top">
              <van-tag plain type="primary" color="burlywood">{{ index + 1 }}</van-tag>
              <span class="custom-title">{{ item.leaveBeginDate | filterTime }}   至   </span>
              <span class="custom-title">{{ item.leaveEndDate | filterTime }}</span>
            </div>
            <van-tag plain type="primary" color="burlywood">{{ item.leaveTypeName }}</van-tag>
          </div>
        </template>
        <template #label>
          <van-tag plain type="primary" color="burlywood">{{ item.proName }}</van-tag>
          <span class="cust-title">{{ item.detailReason }}</span>
        </template>
      </van-cell>
    </van-list>
    <!-- 新增请假按钮 -->
    <div class="task-btn">
        <van-button type="info" size="small" block color="burlywood" @click="onAdd">新增请假</van-button>
    </div>
    <!-- 新增请假的弹出层 -->
    <van-popup v-model="showAdd" position="bottom">
      <!-- 新增请假表单 -->
      <van-form @submit="onSubmit">
          <van-field
          readonly
          clickable
          :value="addList.depName"
          name="deputy"
          label="职位代理人:"
          placeholder="点击选择职业代理人"
          @click="showDeputy" />
          <van-field
            readonly
            clickable
            name="beginDate"
            :value="addList.leaveBeginDate"
            label="开始日期"
            placeholder="点击选择日期"
            @click="showCalendar1 = true"
          />
          <van-field
            readonly
            clickable
            name="beginTime"
            :value="addList.leaveBeginTime"
            label="开始时间"
            placeholder="点击选择开始时间"
            @click="showTimePicker1 = true"
          />
          <van-field
            readonly
            clickable
            name="endDate"
            :value="addList.leaveEndDate"
            label="结束日期"
            placeholder="点击选择日期"
            @click="showCalendar2 = true"
          />
          <van-field
            readonly
            clickable
            name="endTime"
            :value="addList.leaveEndTime"
            label="结束时间"
            placeholder="点击选择结束时间"
            @click="showTimePicker2 = true"
          />
          <van-field name="leaveType" label="请假类型:">
            <template #input>
              <van-checkbox-group v-model="addList.leaveType" :max="3">
                <van-checkbox
                  v-for="item in GetLeaveType"
                  :key="item.typeId"
                  :name="item.typeId"
                  checked-color="burlywood"
                  :style="{ marginBottom: '4px' }">{{ item.typeName }}</van-checkbox>
              </van-checkbox-group>
            </template>
          </van-field>
          <van-field v-model="addList.detailReason" label="事由:" name="detailReason" type="textarea" maxlength="30" show-word-limit />
          <van-field v-model="addList.remark" label="备注:" name="remark" type="textarea" maxlength="30" show-word-limit />
        <div class="edit-btn">
          <van-button block size="small" type="info" color="burlywood" native-type="submit">提交</van-button>
        </div>
      </van-form>
    </van-popup>
    <!-- 日期选择器 -->
    <van-calendar v-model="showCalendar1" @confirm="selectDate1" color="burlywood" />
    <van-calendar v-model="showCalendar2" @confirm="selectDate2" color="burlywood" />
    <!-- 时间选择器1 -->
    <van-popup v-model="showTimePicker1" position="bottom">
      <van-datetime-picker
        type="time"
        @confirm="timeOnConfirm1"
        @cancel="showTimePicker = false"
      />
    </van-popup>
        <!-- 时间选择器2 -->
    <van-popup v-model="showTimePicker2" position="bottom">
      <van-datetime-picker
        type="time"
        @confirm="timeOnConfirm2"
        @cancel="showTimePicker = false"
      />
    </van-popup>
    <!-- 代理人选择器 -->
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="peoColumns"
        @confirm="peoOnConfirm"
        @cancel="showPicker = false"
        v-if="peoColumns.length > 0"
      />
      <van-empty description="暂无数据" v-else />
    </van-popup>
  </div>
</template>

<script>
import { TopHeader } from '@/components'
import { getStaffAPILeave, AddStaffAPILeave, GetLeaveType, getPeoList } from '@/request/api'
import dayjs from 'dayjs'

export default {
  name: 'MyLeave',
  components: {
    TopHeader
  },
  filters: {
    filterTime (val) {
      return val.slice(0, 10)
    }
  },
  data () {
    return {
      leftArrow: true, // 顶部标题栏组件是否有返回按钮
      loading: false,
      finished: false,
      list: [],
      serCount: 0, // 我的请假数据总量
      pageIndex: 0,
      userId: sessionStorage.getItem('userId'), // 用户id
      userName: sessionStorage.getItem('userName'), // 用户名字
      peoColumns: [], // 代理人选择器数据
      showPicker: false, // 代理人员选择器是否显示
      showAdd: false, // 新增请假弹出层状态
      addList: {
        proposer: sessionStorage.getItem('userId'), // 申请人id
        deputy: '', // 职位代理人id
        depName: '', // 职位代理人名字
        leaveBeginDate: '', // 请假开始日期
        leaveBeginTime: '', // 请假开始时间
        leaveEndDate: '', // 请假结束日期
        leaveEndTime: '', // 请假结束时间
        leaveType: [], // 请假类型
        detailReason: '', // 事由
        remark: '', // 备注
        state: 'Add' // 请假表单提交状态
      },
      showCalendar1: false, // 日期选择器显示状态
      showCalendar2: false, // 日期选择器显示状态
      showTimePicker1: false, // 时间选择器显示状态
      showTimePicker2: false, // 时间选择器显示状态
      vacType: [], // 请假类型
      GetLeaveType: [], // 请假类型数据
      info: '' // 请假事由
    }
  },
  created () {
    const param = { 'Id': this.userId, 'formId': '', 'page': this.pageIndex, 'pageCount': 10 }
    // 获取我的请假列表数据
    getStaffAPILeave(param).then(res => {
      console.log(res)
      this.list = res.Data
      this.formId = res.Data.id
      this.serCount = res.Data.length
    })
    // 请假类型数据获取
    GetLeaveType().then(res => {
      console.log(res)
      if (res.Message === '查询成功') {
        this.GetLeaveType = res.Data
      }
    })
  },
  methods: {
    onLoad () {
      // 异步更新数据
      setTimeout(() => {
        this.pageIndex++
        const param = { 'Id': this.userId, 'formId': '', 'page': this.pageIndex, 'pageCount': 10 }
        getStaffAPILeave(param).then(res => {
          this.list = [...this.list, ...res.Data]
        })
        // 加载状态结束
        this.loading = false
        // 数据全部加载完成
        if (10 * (this.pageIndex + 1) >= this.serCount) {
          this.finished = true
        }
      }, 1000)
    },
    // 跳转到详情页
    toDetail (value) {
      console.log('跳转到详情页', value)
      sessionStorage.setItem('FORM_ID', JSON.stringify(value.id))
      sessionStorage.setItem('DATA', JSON.stringify(value))
      this.$router.push({ path: '/LeaDetail' })
    },
    // 点击新增请假按钮
    onAdd () {
      this.showAdd = true
    },
    // 点击代理人员选择
    showDeputy () {
      this.getPeo()
      this.showPicker = true
    },
    // 获取代理人数据
    getPeo () {
      this.peoColumns = []
      const param = { 'stype': 'skills', page: 0, pageCount: 100 }
      getPeoList(param).then(res => {
        console.log(res)
        if (res.msg === '数据加载成功') {
          this.peoColumns = res.result.peo.map(item => {
            return {
              text: item.Source_Name,
              value: item.Source_Id
            }
          })
        }
      })
    },
    // 代理人员选择器
    peoOnConfirm (value) {
      if (value) {
        console.log(value)
        this.addList.depName = value.text
        this.addList.deputy = value.value
        this.showPicker = false
      }
    },
    // 日期选择器1
    selectDate1 (date) {
      this.showCalendar1 = false
      this.addList.leaveBeginDate = dayjs(date).format('YYYY-MM-DD')
    },
    // 时间选择器1
    timeOnConfirm1 (time) {
      this.showTimePicker1 = false
      this.addList.leaveBeginTime = time
    },
    // 日期选择器2
    selectDate2 (date) {
      this.showCalendar2 = false
      this.addList.leaveEndDate = dayjs(date).format('YYYY-MM-DD')
    },
    // 时间选择器2
    timeOnConfirm2 (time) {
      this.showTimePicker2 = false
      this.addList.leaveEndTime = time
    },
    // 添加请假提交事件
    onSubmit (values) {
      console.log(values)
      if (values) {
        if (values.deputy && values.beginDate && values.beginTime && values.endDate && values.endTime && values.leaveType) {
          this.$dialog.confirm({
            title: '提示',
            message: '您确定要提交吗?',
            confirmButtonColor: 'burlywood'
          }).then(() => {
            console.log(this.addList)
            AddStaffAPILeave(this.addList).then(res => {
              console.log(res)
              if (res.Tag === 1) {
                console.log('提交成功')
                this.$toast('提交成功')
                this.$router.go(0)
              } else {
                this.$toast.fail('提交失败')
              }
            })
          }).catch(() => {})
        } else {
          this.$dialog.alert({
            message: '职位代理人,开始/结束日期,开始/结束时间,请假类型必填',
            confirmButtonColor: 'burlywood'
          })
        }
      } else {
        this.$dialog.alert({
          message: '申请人错误',
          confirmButtonColor: 'burlywood'
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .my-leave {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  .van-list {
    flex: 1;
    overflow: auto;
    .van-cell {
      .van-cell__title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        .van-title {
          display: flex;
          .van-top {
            flex: 1;
            display: flex;
            align-items: center;
            .van-tag {
              margin-left: 2px;
            }
          }
          .cust-title {
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-align: right;
          }
        }
        .van-tag {
          margin-right: 2px;
        }
        .van-cell__label {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          .van-tag:last-child {
            float: right;
          }
        }
      }
    }
  }
  .task-btn {
    width: 100%;
    height: 1.4rem;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 0;
    .van-button {
      width: 90%;
    }
  }
  .van-popup {
    .edit-btn {
      margin: .4rem;
    }
  }
  .van-popup {
    height: 70%;
  }
}
</style>
